import { getFetch } from '@/utils/doFetch';
import { LoadingOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { Empty, Space, Tag, theme, Tooltip } from 'antd';


const Tagpreview = ({ project }) => {

  const {token} = theme.useToken(token);

  //查询当前项目下的所有标签
  const { data, loading } = useRequest(
    async () => {
      let res = await getFetch({
        url: '/projectTag',
        params: {
          projectId: project.id,
        },
      });
      return res?.data?.dataList;
    },
    {
      refreshDeps: [project?.id],
      onSuccess: () => {
      }
    },
  );





  return (
    loading ?
      <div className="sorts">
        <LoadingOutlined></LoadingOutlined>
      </div>
      :
      data?.length === 0 ?
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
        :
        <Space wrap style={{ paddingTop: 4, justifyContent: 'flex-start', gap: 8 }}>
          {data?.map?.((tag) => {
            const isLongTag = tag?.name?.length > 8;
            const tagElem = (
              <Tag
                key={tag.name}
                style={{
                  cursor: 'pointer',
                  color: "#fff" ,
                  backgroundColor: tag.color ? tag.color : token.colorPrimary,
                }}
                bordered={false}
              >
                <span>
                  {isLongTag ? `${tag.name.slice(0, 8)}...` : tag.name}
                </span>
              </Tag>
            );
            return isLongTag ? (
              <Tooltip title={tag.name} key={tag.name}>
                {tagElem}
              </Tooltip>
            ) : (
              tagElem
            );
          })}
        </Space>
  );
};



export default Tagpreview;
